<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    body {
        margin: auto 0;
        font-size: 12px
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0
    }

    li {
        list-style-type: none
    }
    html,body,div,span,applet,object,iframe,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    .drd-list-container {
        margin: 10px 0 30px;
    }

    .drd-list-container .drd-list {
        padding-top: 10px;
    }

    .drd-list-container .drd-list h1 {
        margin-top: 0;
    }

    .drd-list-column {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }

    .drd.drd-column {
        margin-bottom: 25px;
        text-align: center;
    }

    .drd .drd-inner {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding: 20px;
    }

    .drd.drd-column .drd-inner {
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }
    .card-meta {
        -webkit-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        margin-right: 10px;
    }

    .card-meta p {
        margin-right: 5px;
        color:#2E8965;
        display: inline-block;
        font-size: 1em;
    }

    .card-meta p span.icon {
        margin-right: 3px;
    }

    .card-meta .price {
        margin: 0;
        line-height: 1;
    }

    .card-meta .price span {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }
    .drd.drd-column .cta,.drd.drd-column .discount-box,.drd.drd-column .card-meta {
        width: 100%;
        margin: 0;
        -webkit-flex-grow: 1;
        -ms-flex-grow: 1;
        flex-grow: 1;
    }

    .drd.drd-column .cta {
        text-align: center;
    }

    .drd.drd-column  .code-btn-container {
        display: inline-block;
        text-align: left;
    }

    .code-btn-container {
        overflow: hidden;
        height: 40px;
        width: 150px;
        position: relative;
        border-radius: 3px;
        letter-spacing: 0.5px;
    }

    .code-btn-container:before,.code-btn-container:after {
        content: " ";
        display: table;
    }

    .code-btn-container:after {
        clear: both;
    }


    .code-btn-container .code-btn {
        font-size: 16px;
        height: 40px;
        font-weight: 600;
        background-color: #1ad383;
        position: relative;
        display: inline-block;

    }

    .code-btn-container .code-btn span {
        display: inline-block;
        position: relative;
        z-index: 2;
        margin: 10px 8px 10px 12px;
        -webkit-transition: margin 0.2s;
        transition: margin 0.2s;
    }


    .code-btn-container:hover .code-btn span {
        margin: 10px 6px 10px 8px;
    }




    .details-cont {
        border-top: 1px solid #e2e2e2;
        padding: 12px 25px 15px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        font-size: 14px;
        line-height: 1.5;
    }

    .details-cont p.details {
        color: #6f6f7f;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-right: 5px;
    }

    .details-cont p.more {
        white-space: nowrap;
    }
    .drd.drd-column .related-logo {
        margin: 20px auto;
        width: 200px;
        height: 120px;
        text-align: center;

    }
    .drd.drd-column .related-logo .align-helper {
        height: 100%;
        display: inline-block;
    }

    .related-logo,.product-image {
        margin-top:-25px;
        margin-bottom:-25px;
        width: 200px;
        position: relative;
        -webkit-flex-shrink: 0;
        -ms-flex-shrink: 0;
        flex-shrink: 0;
    }

    .related-logo img,.product-image img {
        max-width: 100%;
        max-height: 100%;
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    h6.store-name {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-wrap: break-word;
    }

    h6.store-name a {
        color: #444;
    }

    .drd.drd-column .card-meta h3.description {
        font-size: 22px;
        font-weight: 400;
        min-height: 55px;
    }
    .drd.drd-column .card-meta h3.description.one-line {
        min-height: 27px;
    }
    .drd .card-meta p.product-details {
        margin: 10px 0;
    }

    .drd.drd-column .drd-inner {
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }.drd {
         width:100%;
         background-color: #fff;
         margin-bottom: 10px;
         border: 1px solid #e2e2e2;
         -webkit-box-shadow: 0 1px 0 0 #e2e2e2;
         box-shadow: 0 1px 0 0 #e2e2e2;
         border-radius: 4px;
         overflow: hidden;
     }
    .drd .description>a {
        color: #444;
    }

    .drd .description>a:hover {
        color: #2196f3;
        text-decoration: none;
    }



</style>
<body>


<!-- Static navbar -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">病毒查询系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <!-- <li class="active"><a href="#">Home</a></li>-->
                <!--<li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>-->
                <!--<li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>-->
            </ul>
        </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
</nav>

<!-- Main component for a primary marketing message or call to action -->

<div class="row ">
    <div class="col-lg-3 " style="padding:0px!important"></div>
    <div class="col-lg-6" style="padding:0px!important">
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button"
                        class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">搜索方式
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">名称搜索</a></li>
                    <li><a href="#">类型搜索</a></li>
                </ul>
            </div><!-- /btn-group -->
            <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
    <div class="col-lg-3 ml-20" style="padding:0px!important">
        <button type="submit" class="btn btn-large ml-200 btn-default">搜索</button>
    </div>
</div><!-- /.row -->


<br>
<br>
<br>
<br>

<div class="row">
    <div class="col-lg-2"></div>

    <div class="col-lg-8">
        <ul>
            <li>
                <ul class="drd-list drd-list-column">
                    <li class="drd">
                        <div class="drd-inner">
                            <a href="compound/DB01048.png" target="_blank" alt="药物结构" title="药物结构" class="related-logo store-logo">
                                <img src="http://www.idruglab.com/drd/compound/DB01048.png" alt="药物结构"></a>
                            <div class="card-meta">
                                <ul class="list-unstyled static">
                                    <li><p>药品名称：</p> &nbsp;阿巴卡韦</li>
                                    <li><p>药品编号：</p> &nbsp;DRDD0900</li>
                                    <li><p>药物配方：</p> &nbsp;C14H18N6O</li>
                                    <li><p>药物重量：</p> &nbsp;286.3323</li>
                                    <li><p>CAS号：</p> &nbsp;136470-78-5</li>
                                </ul>
                            </div>
                            <div style="float:right;">
                                <a href="drugDetail.php?drugid=DRDD0900" target="_blank" title="">
                                    <div title="" class="btn btn-primary"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">显示详细资料 </font></font></div>
                                </a>

                            </div>
                        </div>
                        <div class="details-cont">
                            <p class="details">
                                <b>微笑：</b> OC[C@H]1C[C@@H](n2c3nc(nc(NC4CC4)c3nc2)N)C=C1
                            </p>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="col-lg-2"></div>

</div>

</div> <!-- /container -->


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>